<template>
  <div v-if="list" class="list">
    <dl v-for="(v, i) in list.topData" :key="i">
      <dt>
        <img :src="v.url" alt="">
      </dt>
      <dd>
        <h3>{{ v.title }}- <span style="color:red;">置顶</span> </h3>
        <p>{{v.auther}}---{{ v.createTime }}</p>
      </dd>
    </dl>

    <dl v-for="(v, i) in list.list" :key="i">
      <dt>
        <img :src="v.url" alt="">
      </dt>
      <dd>
        <h3>{{ v.title }}-</h3>
        <p><span style="color: red;">{{ v.isCommon ? '推荐-': '' }}</span> {{v.auther}}---{{ v.createTime }}</p>
      </dd>
    </dl> 
  </div>
</template>

<script lang="ts" setup> 
import axios from 'axios'
import { onMounted, ref } from 'vue';
const list = ref<any>()
const fetchList = async () => {
  const resp = await axios.get('/api/2002a/list')
  console.log(resp.data.data);
  list.value = resp.data.data
}


onMounted(() => {
  fetchList()
})
</script>


<style lang="scss" scoped>
.list {
  dl {
    display: flex;
    border-bottom: 1px solid #ccc;
    img {
      width: 120px;
      height: 80px;
    }
  }
}
</style>